<template>
    <div>
        <el-form :inline="true" :model="queryParams" size="mini">
            <el-form-item :label="$t('title')">
                <el-input v-model="queryParams.title"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="requestData"
                    icon="el-icon-search"
                    >{{ $t("search") }}</el-button
                >
                <el-button
                    type="primary"
                    v-if="addPermission"
                    @click="addOrganization"
                    icon="el-icon-plus"
                    >{{ $t("add") }}
                </el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            stripe
            class="init_table"
        >
            <el-table-column
                label="名称"
                min-width="200"
                prop="title"
                show-overflow-tooltip
                align="left"
            >
            </el-table-column>
            <el-table-column prop="province" :label="$t('province')">
            </el-table-column>
            <el-table-column prop="city" :label="$t('city')"> </el-table-column>
            <el-table-column prop="district" :label="$t('district')">
            </el-table-column>
            <el-table-column prop="organization_type.title" label="机构类型">
            </el-table-column>
            <el-table-column prop="address" :label="$t('address')">
            </el-table-column>
            <el-table-column prop="status" :label="$t('status')">
            </el-table-column>

            <el-table-column
                align="center"
                :label="$t('actions')"
                width="300px"
            >
                <template slot-scope="scope">
                    <el-button
                        v-if="updatePermission"
                        size="mini"
                        @click="editOrganization(scope.row)"
                        >{{ $t("edit") }}
                    </el-button>
                    <el-button
                        v-if="deletePermission"
                        type="danger"
                        size="mini"
                        @click="handleDelete(scope.$index, scope.row)"
                        >{{ $t("delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="mo-page"
            @current-change="requestData"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total"
        >
        </el-pagination>
    </div>
</template>

<script>
import {
    getOrganizationList,
    deleteOrganization
} from "../../../api/organization";
import {
    responseDataFormat,
    tableDefaultData,
    editSuccess,
    addSuccess,
    deleteSuccess
} from "../../../libs/tableDataHandle";
import { hasPermission } from "../../../libs/permission";
// import VueNeditorWrap from 'vue-neditor-wrap'
import { queryParams } from "../../../mixins/queryParams";

export default {
    name: "adminOrganizationIndex",
    components: {
        // VueNeditorWrap
    },
    mixins: [queryParams],
    data: () => ({
        ...tableDefaultData(),
        cropImageParams: {
            show: false,
            params: {
                token: "123456798",
                name: "avatar"
            },
            headers: {
                smail: "*_~"
            },
            imgDataUrl: ""
        },
        fileList: [],
        fileUrl: "",

        content: "",
        rules: {
            name: [{ required: true }, { min: 1, max: 255 }],
            uri: [{ required: true }, { min: 1, max: 255 }],
            guard_name: [{ required: true }, { min: 1, max: 255 }],
            parent_id: [{ required: true, type: "number" }],
            sequence: [{ type: "number" }]
        }
    }),
    watch: {
        $route(to, from) {
            if (from.name == "adminOrganizationEdit") {
                this.requestData();
            }
        }
    },
    methods: {
        handleRemove(file, filelist) {
            console.log(file, filelist);
        },
        addOrganization() {
            this.$router.push({ name: "adminOrganizationEdit" });
        },
        ready() {
            console.log("redddddddd");
        },
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteOrganization(row.id).then(response => {
                        deleteSuccess(index, this);
                        this.requestData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        editOrganization(row) {
            this.$router.push({
                name: "adminOrganizationEdit",
                params: { id: row.id }
            });
        },

        requestData() {
            this.loading = true;
            getOrganizationList({
                ...this.queryParams,
                page: this.queryPage
            }).then(response => {
                responseDataFormat(response, this);
            });
        },

        //drop
        toggleShow() {
            this.cropImageParams.show = !this.cropImageParams.show;
        },
        /**
         * crop success
         *
         * [param] imgDataUrl
         * [param] field
         */
        cropSuccess(imgDataUrl, field) {
            console.log("-------- crop success --------");
            this.cropImageParams.imgDataUrl = imgDataUrl;
        },
        /**
         * upload success
         *
         * [param] jsonData  server api return data, already json encode
         * [param] field
         */
        cropUploadSuccess(retdata) {
            console.log("-------- upload success --------");
            // this.fileList.push(jsonData)
            console.log("fileList: ", retdata);
            console.log("this.filelist", this.fileList);
        },
        cropUploadUrlSuccess(retdata) {
            console.log("fileUrl", this.fileUrl);
        },
        removefile() {
            this.fileUrl = "";
        },
        /**
         * upload fail
         *
         * [param] status    server api return error status, like 500
         * [param] field
         */
        cropUploadFail(status, field) {
            console.log("-------- upload fail --------");
            console.log(status);
            console.log("field: " + field);
        }
    },
    computed: {
        updatePermission: function() {
            return hasPermission("organization.update");
        },
        addPermission: function() {
            return hasPermission("organization.store");
        },
        deletePermission: function() {
            return hasPermission("organization.destroy");
        }
    },
    created() {
        this.requestData();
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
